<template>
  <!-- <Home /> -->
   <!-- 路由出口 -->
  <router-view />
  <!-- <h1>{{ title }}</h1> -->
  <h1 v-if="showTitle">{{ title }}</h1>
  <h1 v-else>暂无标题</h1>
  <button @click="title='hello world'">
    改变title
  </button>
  <button @click="changeTitle">
    改变title2
  </button>
  <button @click="toggleTitle">
    隐藏title
  </button>
  <div>
    <input type="text" v-model="input">
    <button @click="add">添加</button>
    <ul>
      <li @click="test" v-for="({text, id},idx) in list">
        {{ text }}--{{ idx }}
        <button @click.stop.once="deleteItemWithId(id, $event)">删除</button>
        <!-- <button @click="deleteItem(idx)">删除</button> -->
        <!-- <button @click="list.splice(idx,1)">删除</button> -->
      </li>
      <!-- <li v-for="(item,idx) in list">
        {{ item.text }}--{{ idx }}
        <button @click="deleteItem(item.id)">删除</button>
      </li> -->
      <!-- <li v-for="item in list">
        {{ item.text }}
        <button @click="deleteItem(item.id)">删除</button>
      </li> -->
    </ul>
  </div>
</template>
<script setup>
// 事件对象是一个对象，包含了事件的所有信息
// 事件修饰符：.prevent 阻止默认行为 .stop 阻止事件冒泡 .capture 捕获事件 .self 只有在事件的目标是当前元素时才触发 .once 事件只触发一次
// 数据驱动
// 状态
// 路由
import Home from './views/Home.vue'
import { ref } from 'vue'
const title = ref('单页应用SPA  组件化开发')
const showTitle = ref(true)
const input = ref('')
const list = ref([])
const test = () => {
  console.log('test')
}
const add = () => {
  list.value = [...list.value,{ text: input.value, id: Date.now()}]
  // list.value.push({
  //   text: input.value
  // })
  input.value = ''
}
// 使用ID删除
const deleteItemWithId = (id, e) => {
  console.log(e)
  // list.value.splice(idx,1)
  // list.value = list.value.filter((item) => id !== item.id)
}
// 使用索引删除
const deleteItem = (idx) => {
  // list.value.splice(idx,1)
  list.value = list.value.filter((item,index) => index !== idx)
}
// 组件就是页面的一块视图
const changeTitle = () => {
  title.value = 'hello world'
}
const toggleTitle = () => {
  showTitle.value = !showTitle.value
}
</script>
<style scoped>
</style>
